<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div>123</div>
    <div>123</div>
    <div>123</div>
    <div>123</div>
    <div>123</div>
    <script>
      // spread 扩展运算符
      // 扩展运算符(spread)是三个点(...)。
      // 它好比 rest 参数的逆运算
      // 作用: ==> 将一个数组转为用逗号分隔的参数序列.

      // 注意:它不会改变原数组
      const arr = [1, 2, 3, 4, 5];
      console.log(...arr); // 1,2,3,4,5 浏览器上没有显示逗号，假装有

      // 主要应用
      // 1. 求一个数组的最大最小值
      const arr2 = [11, 1, 4, 4, 334];
      // Math.max() 它本身接收的是参数列表
      console.log(Math.max(...arr2));
      console.log(Math.min(...arr2));

      // 2. 复制/拷贝数组 (浅拷贝)
      const a1 = [1, 2];
      const a2 = a1;
      // 赋值,数组的直接赋值，赋的是地址，指向的是堆内存中同一个数组对象
      a2[0] = 666;
      console.log(a1);
      // * ===========  start  ==============
      const a3 = [5, 6, 7];
      const a4 = [...a3];
      a3[0] = 9;
      console.log(a4);
      // ==> 数组里面的元素是基本数组类型，修改数组元素的值，相互不影响
      console.log(a3);

      // 3. 合并数组  (浅拷贝)
      const a5 = ["c", "d"];
      const a6 = ["e", "f"];

      // ES5 的合并 concat
      const resArr = a5.concat(a6);
      console.log(resArr);
      // ES6 ...
      const a7 = [...a5, ...a6];
      console.log(a7);

      // 4. 扩展运算符还可以展开字符串
      // [...str] ==> 将字符串展开为数组
      const str = "hello world";
      const a8 = [...str];
      console.log(a8);
      // 反转字符串
      const res = str.split("").reverse().join("");

      // ==> 扩展运算符的方式
      const resStr = [...str].reverse().join(""); // ==> JS高级学的，高级一点
      console.log(resStr);

      // 5. 将伪数组转为真数组
      const divs = document.querySelectorAll("div");
      console.log("==============");

      // console.log(divs);
      // divs.push(666)
      const resDiv = [...divs];
      console.log(resDiv);
      resDiv.push(666);
      console.log(resDiv);

      /* ==================== 将伪数组转为真数组 ===================== */
      // 1. [...likeArr] 使用扩展运算符
      // 2. Array.from(likeArr)
      const resReal = Array.from(divs);
      console.log(resReal);
    </script>
  </body>
</html>
